<template>
	<view class="refunds-box">
		<view class="top-info">
			订单编号 <text class="num">{{def.id}}</text>
		</view>
		<view class="v-cont">
			<view class="title">
				问题描述
			</view>
			<view class="input">
				<textarea placeholder="请输入～" v-model="question"></textarea>
			</view>
			<view class="title mt">
				上传照片
			</view>
			<view class="img-list">
				<view class="" v-for="(img,index) in imgList" :key="index">
					<image :src="img" class="img" mode="" :webp="imgType(img)"></image>
				</view>
				<view class="bnt" @tap="upLoadImg">
					<image src="../../static/130.png" class="img" mode=""></image>
				</view>
			</view>
			<view class="select">
				是否申请退款
				<view class="s-right">
					<radio-group @change="radioChange" :multiple="false" class="tk-box">
						<radio value="1" color="#E4919D" class="a" name='是'>是</radio>									
						<radio value="2" color="#E4919D" name='否'>否</radio>										
					</radio-group>
				</view>
			</view>
		</view>
		<view class="y-bnt" @tap="save">
			确认提交
		</view>
	</view>
</template>

<script>
	import {nailCustomerService} from '@/api/user.js'
	export default {
		data() {
			return {
				items: [{
					value: '1',
					name: '是',
					checked: 'true'
				},
				{
					value: '2',
					name: '否'
				}],
				imgList: [],
				isApplyRefund: '',
				question: '',
				def: {}
			};
		},
		onLoad(ops) {
			this.def = ops
		},
		methods: {
			imgType(url){
				if(url.indexOf('.webp') >-1) {
					return true
				}else{
					return
				}
			},
			// 图片上传
			upLoadImg(num) {
				let that = this;
				uni.chooseMedia({
					count: 3, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// uploadPhoto(res.tempFiles);
						uni.showLoading({
							title: '图片上传中...'
						})
						res.tempFiles.forEach((ele) => {
							console.log(ele)
							// that.imgList.push(ele.tempFilePath)
							that.uploadPhoto(ele.tempFilePath);
						})
						// that.imgList.push(res.tempFiles[0].tempFilePath)
						// console.log(that.imgList)
					}
				});
			},
			uploadPhoto(tempFilePaths) {
				const that = this
				// console.log('tempFilePaths',tempFilePaths,tempFilePaths[0].tempFilePath)
				// console.log(that.imgList)
				let token = uni.getStorageSync('token') || ""
				uni.uploadFile({
					url: uni.$baseUrl + '/nailVideo/upload', //开发者服务器 url
					header:{
						// HTTP 请求 Header, header 中不能设置 Referer
						'X-Access-Token': token
					},
					// files: that.imgList,
					filePath: tempFilePaths,//tempFilePaths[0].tempFilePath, // 要上传文件资源的路径
					name: 'pictures', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
						// isApplyRefund:that.isApplyRefund,orderId:this.def.id,question:this.question
						dir: 'question'
					},
					success(res) {
						let data = res.data ? JSON.parse(res.data) : {}
						console.log('上传成功~~~~', data.result);
						that.imgList.push(data.result)
					},
					fail(err) {
						console.log('失败', err);
						uni.hideLoading();
					},
					complete() {
						console.log('结束');
						uni.hideLoading();
					},
				})
			},
			radioChange(e){
				console.log(e)
				this.isApplyRefund = e.detail.value
			},
			save(){
				let merchantId = uni.getStorageSync('merchantId')
				if(!this.question){
					uni.showToast({title: '请输入问题描述',icon:"none"});
					return
				}
				if(!this.isApplyRefund){
					uni.showToast({title: '请选择是否申请退款',icon:"none"});
					return
				}
				nailCustomerService({tenantId: merchantId, orderType: this.def.orderType, questionImg: this.imgList.length ? this.imgList.join(',') : '', isApplyRefund:this.isApplyRefund,orderId:this.def.id,question:this.question}).then((res) => {
					uni.showToast({title: '成功',icon:""});
					uni.redirectTo({
						url: '/pagesA/aftermarket/list'
					})
				})
			},
		}
	}
</script>

<style lang="less">
.refunds-box{
	padding-bottom: 45rpx;
	.top-info{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		background-color: #fff;
		padding-top: 60rpx;
		padding-left: 30rpx;
		padding-bottom: 42rpx;
		display: flex;
		align-items: center;
		.num{
			color: #333333;
			margin-left: 12rpx;
		}
	}
	.v-cont{
		margin: 0 30rpx;
		margin-top: 48rpx;
		.title{
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.mt{
			margin-top: 48rpx;
		}
		.input{
			height: 308rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,73,91,0.05);
			border-radius: 16rpx;
			padding: 20rpx;
			margin-top: 24rpx;
			textarea{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333;
			}
		}
	}
	.img-list{
		margin-top: 34rpx;
		display: flex;
		.img{
			width: 226rpx;
			height: 226rpx;
		}
		.bnt{
			width: 226rpx;
			height: 226rpx;
			border: 2rpx dashed #d9dada;;
		}
	}
	.select{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		display: flex;
		margin-top: 44rpx;
		.s-right{
			margin-left: 30rpx;
			.a{
				margin-right: 50rpx;
			}
		}
	}
	.y-bnt{
		background: #E4919D;
		height: 98rpx;
		border-radius: 50rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 0 32rpx;
		margin-top: 80rpx;
	}
}
</style>
